<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="hmg.common.CommonUtils"%>
<%@ page import="able.com.vo.SearchVO"%>
<%@ page import="java.util.List"%>
<%@ page import="hmg.vo.BoardVO"%>
<%@ page import="hmg.vo.CodeVO"%>
<%--
    JSP Name : jspName.jsp
    Description : 설명을 기술합니다.
    author Kim hyung soo
    since 2012. 8. 23.
    version 1.0
    Modification Information
       since          author              description
    ===========    =============    ===========================
    2012. 8. 23.     Kim hyung soo     최초 생성
--%>
<%
    String listID = CommonUtils.getParameter(request.getParameter("listID"), "0");
    String compType = CommonUtils.getParameter(request.getParameter("compType"), "0");
    String searchKeyword = CommonUtils.getDecodedParameter(request.getParameter("searchKeyword"), "");

    List<BoardVO> photoList = (List<BoardVO>) request.getAttribute("PhotoList");
    List<CodeVO> bizList = (List<CodeVO>) request.getAttribute("BizList");
    List<CodeVO> compList = (List<CodeVO>) request.getAttribute("CompList");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>사진갤러리 | 현대자동차그룹</title>
<meta name="description" content="현대자동차그룹 및 계열사별 사진 소개" />
<meta name="keywords" content="현대자동차그룹 사진, 계열사 사진, 갤러리, gallery" />
<%@ include file="/WEB-INF/jsp/web/kor/include/header.jspf" %>
<script type="text/javascript">
//<![CDATA[
var page = 1;
var compType = <%= compType %>;
var searchKeyword = "<%= searchKeyword %>";
var pageIsEnded = false;
var mobileKeyWords = new Array("iPhone", "iPad", "BlackBerry", "Android", "Windows CE", "LG", "MOT", "SAMSUNG", "SonyEricsson");

$(function() {
  if (<%= listID %> != null && <%= listID %> != "") fn_view_photo(<%= listID %>, 99, 0);

  var ind = '0';
	for (var word in mobileKeyWords){
		if (navigator.userAgent.match(mobileKeyWords[word]) != null){
			//mobile
			$(this).find(".photo_layOver").show().animate({"top":"118px","opacity": ".8" });
			$(this).find(".bg").hide();
			var ind = '1';
			return false;
		} else if (navigator.userAgent.match(mobileKeyWords[word]) == null)		{
			//web
			$(this).find(".photo_layOver").hide().animate({"top":"162px","opacity": "1"}).stop(true, true);
			$(this).find(".bg").show();
		}
	}
	$(".photo_layOpen").live({
	    mouseover : function(){
	    	if (ind == 0){
	    		if (!$(this).find(".photo_layOver").is(':animated')){
	    			$(this).find(".photo_layOver").show().animate({"top":"118px", "opacity": ".8"}, 500);
	    		}
	    	}
	    },
	    mouseleave : function(){
	      if (ind == 0){
	      	$(this).find(".photo_layOver").animate({"top":"162px", "opacity": "1"}, 500, function(){
	      		$(this).hide();
	      	});
	      }
	    }
	});
});

function fn_view_slide(){
	var totalPanels = $(".photo_scrollContainer").children().size();
  var $panels = $('#photo_gallery_slider .photo_scrollContainer > div');
  var $container = $('#photo_gallery_slider .photo_scrollContainer');
  var curPanel = 0;
  var movingDistance  = 600;

  $container.css({'width': (600* $panels.size()) +'px', 'left':'0px'});
  $("#photo_gallery_slider").data("currentlyMoving", false);

  function change(direction, moveIndex) {
      if((direction && !(curPanel < totalPanels - 1)) || (!direction && (curPanel <= 0))) { return false; }
      if (($("#photo_gallery_slider").data("currentlyMoving") == false)) {
          $("#photo_gallery_slider").data("currentlyMoving", true);
          var next = direction ? curPanel + moveIndex : curPanel - moveIndex;
          var leftValue = $(".photo_scrollContainer").css("left");
          var movement = direction ? parseFloat(leftValue, 10) - (movingDistance * moveIndex) : parseFloat(leftValue, 10) + (movingDistance * moveIndex);
          var curThumb = $("#galley_thumbImg li.on");
          var removeClassEl = direction ? $(curThumb).next() : $(curThumb).prev();
          for (var word in mobileKeyWords){
						if (navigator.userAgent.match(mobileKeyWords[word]) != null){
		        	$(".photo_scrollContainer").stop().animate({"left": movement +"px"}, 0, function() {
		            $("#photo_gallery_slider").data("currentlyMoving", false);
		        	});
		        }else{
			        $(".photo_scrollContainer").stop().animate({"left": movement +"px"}, 300, function() {
			            $("#photo_gallery_slider").data("currentlyMoving", false);
			        });
			      }
			    }
          $(removeClassEl).addClass("on");
          $(curThumb).removeClass("on");
          curPanel = next;
      }
  }

  $("#galley_thumbImg li").click(function(){
      if(!($(".photo_scrollContainer").is(":animated"))){
          var curElSize = $("#galley_thumbImg li.on").index();
          var clickElSize = $(this).index();
          if(curElSize !== clickElSize){
              if(curElSize > clickElSize){
                  change(false, (curElSize-clickElSize));
              }
              else if(curElSize < clickElSize){
                  change(true, (clickElSize-curElSize));
              }
              curPanel = clickElSize;
              $("#galley_thumbImg li").removeClass("on");
              $(this).addClass("on");
          }
      }
      return false;
  });

  $(".photo_gallery_panel img").click(function(){
		$(".photo_gallery_Information").toggle();
	});

	$(".file_Download").click(function(){
		$(".photo_gallery_Information").css({"display":"block"});
	});
}

function fn_append_contents() {
    if (pageIsEnded == false) {
        page++;
        $.ajax({
            type:"post",
            url:"./AjaxPhotoList.do",
            data:({page:page, compType:compType, searchKeyword:searchKeyword}),
            success: function(data) { fn_append_contents_proc(data); }
        });
    }
}

function fn_append_contents_proc(data) {
  $(data).appendTo(".mgr_gallery ul").each(function(){
  	var ind = "0";
		for (var word in mobileKeyWords){
			if (navigator.userAgent.match(mobileKeyWords[word]) != null){
				//mobile
				$(this).find(".photo_layOver").show().animate({"top":"81px","opacity": ".8" }, 500);
				$(this).find(".bg").hide();
				$(this).find(".overlay_gallery").click(function(){
					fe_layPop();
				});
				var ind = '1';
				return false;
			} else if (navigator.userAgent.match(mobileKeyWords[word]) == null)		{
				//web
				$(this).find(".photo_layOver").hide().animate({"top":"212px","opacity": "1"}, 500).stop(true, true);
				$(this).find(".bg").show();
			}
		}
  });
}

function fn_view_photo(listID, dispNO, compType) {
	$("#photoLayer").html("");
  $.ajax({
      type:"post",
      url:"./AjaxPhotoView.do",
      data:({listID:listID, dispNO:dispNO, compType:compType, searchKeyword:searchKeyword}),
      success: function(data) { fn_view_photo_proc(data); }
  });
}

function fn_view_photo_proc(data) {
  $("#photoLayer").html(data);
  fe_layPop(true);
  fn_view_slide();
  $("#noticeWrap").css({"z-index":"-1"});
  $("#footer").css({"z-index":"-2"});
  $(".jspPane").css({"position":"static"});
}

function fn_search() {
    var searchKeyword = $("#searchKeyword").val();
    if (searchKeyword == "") {
        alert("검색어를 입력해 주세요.");
        return;
    }
    document.location.href = "./PhotoList.do?searchKeyword=" + escape(encodeURIComponent(searchKeyword));
}
//]]>
</script>
</head>
<body>
    <!--wrap-->
    <div id="wrap">
        <!-- skip navigation -->
        <div id="skipnavition">
            <a href="#gnb">메뉴바로가기</a><a href="#content">본문바로가기</a>
        </div>
        <!--/ skip navigation -->

        <hr />

        <!-- header-->
        <%@ include file="/WEB-INF/jsp/web/kor/include/left.jspf" %>
        <!--//header-->

        <hr />

        <!--container-->
        <div id="container">
            <div class="scroll-pane scroll-pane">
                <!-- 공통 -->
                <div class="subTitle">
                    <div class="pageTitle">
                        <h2><img src="/hmg/images/web/kor/title/mgr_anl_GalleryList.gif" alt="사진 걸리리" /></h2>
                        <p class="subCopy"><img src="/hmg/images/web/kor/title/mgr_anl_GalleryList_desc.gif" alt="열정과 도전으로 미래를 열어갑니다" /></p>
                    </div>

                    <div class="pageLocation">
                        <ul>
                            <li><a href="/hmg/web/kor/Main.do"><img src="/hmg/images/web/kor/common/location_home.gif" alt="홈"/></a></li>
                            <li><a href="/hmg/web/kor/mgr/GallerySubMain.do">갤러리</a></li>
                            <li class="nowPage"><a href="/hmg/web/kor/mgr/pht/PhotoList.do">사진갤러리</a></li>
                        </ul>
                    </div>
                </div>
                <!--/공통-->

                <!--contents-->
                <div id="content">
                    <div class="affiliateListWrap">
                        <div class="groupNews_Btn">
                            <div class="left_Btn">
                                <!-- searcharea-->
                                <div class="mgr_gallery_search">
                                    <img src="/hmg/images/web/kor/mgr/gallery_Search_Text01.gif" alt="상세검색" class="search_text"/>
                                    <label class="hidden" for="searchKeyword">검색</label>
                                    <input type="text" title="검색" id="searchKeyword" name="searchKeyword" value="<%= searchKeyword %>" onkeypress="javascript:if (event.keyCode==13) {fn_search();}"/>
                                    <a href="javascript:fn_search();"><img src="/hmg/images/web/kor/btn/btn_search.gif" alt="검색" class="search_btn"/></a>
                                </div>
                                <!--/ searcharea-->
                            </div>
                            <div class="right_Btn">
                                <a href="#"><img src="/hmg/images/web/kor/btn/btn_select.gif" alt="계열사선택" /></a>
                            </div>
                        </div>

                        <!--companyWrap-->
                        <div class="companyWrap galleryType">
                            <div class="companyList">
                                <table summary="계열사 목록">
                                <caption>계열사목록</caption>
                                    <thead>
                                        <tr>
<%
    for (int idx = 0; idx < bizList.size(); idx++) {
        CodeVO biz = bizList.get(idx);

        if (idx + 1 < bizList.size())
            out.println("                                            <th scope=\"col\">" + biz.getNameKo() + "</th>");
        else
            out.println("                                            <th scope=\"col\" class=\"last\">" + biz.getNameKo() + "</th>");
    }
%>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
<%
    String prevBizCode = "";
    for (int idx = 0; idx < compList.size(); idx++) {
        CodeVO comp = compList.get(idx);

        if (comp.getUpperValue().equals(prevBizCode) != true) {
            prevBizCode = comp.getUpperValue();

            if (idx == 0)
                out.println("                                            <td class=\"first\">");
            else if (prevBizCode.equals(bizList.get(bizList.size() - 1).getValue()) == true) {
%>
                                                </ul>
                                            </td>
                                            <td class="last">
<%
            }
            else {
%>
                                                </ul>
                                            </td>
                                            <td>
<%
            }

            out.println("                                                <ul>");
        }

        out.println("                                                    <li><a href=\"./PhotoList.do?compType=" + comp.getValue() + "&page=1\">" + comp.getNameKo() + "</a></li>");
    }
%>
                                                </ul>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <a href="#" class="compListClose"><img src="/hmg/images/web/kor/btn/btn-close.gif" alt="닫기" /></a>
                            </div>
                        </div>
                        <!--/companyListWrap-->

                        <div class="mgr_gallery">
                            <ul class="contain">
<%  if (photoList == null || photoList.size() == 0) { %>
                                </br><li class="photo_layOpen" style="text-align:center;width:100%;">등록된 게시물이 없습니다.</li>
<%
    }
    else {
        for (int idx = 0; idx < photoList.size(); idx++) {
            BoardVO photo = photoList.get(idx);

            String className = "";
            String liClassName = "";
            String thumbnail = photo.getThumbnailImage();

            if (idx == 0 || idx == 4 || idx == 6 || idx == 11 || idx == 12 || idx == 16) {
                className = " wide";
                thumbnail = photo.getThumbnailImage2();
            }
            if ((idx + 1) % 3 == 0)
                liClassName += " last";
%>
                                <li class="photo_layOpen<%= className %><%= liClassName %>" onclick="javascript:fn_view_photo(<%= photo.getListID() %>, <%= photo.getDispNo() %>, <%= compType %>);">
                                    <div class="overlay_gallery"><a href="#"><img src="<%= thumbnail %>" alt="" /></a>
                                        <div class="photo_layOver<%= className %>">
                                            <p class="category"><%= photo.getCompName() %></p>
                                            <p class="title" style="width:91%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"><%= photo.getTitle() %></p>
                                        </div>
                                        <div class="bg"></div>
                                    </div>
                                </li>
<%
        }
    }
%>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--/ 내용 -->
            </div>
            <!--/contents-->
        </div>
        <!--/container-->

        <!-- layer -->
        <div class="photo_layer">
            <div class="photo_mask"></div>
            <div class="photo_layPop">
                <p class="btnClose"><img src="/hmg/images/web/kor/mgr/gallery_Slide_Close.png" alt="닫기"/></p>
                <div id="photoLayer" class="galleryView"></div>
            </div>
        </div>
        <!-- /layer -->

        <hr />

        <!--footer-->
        <%@ include file="/WEB-INF/jsp/web/kor/include/footer.jspf" %>
        <!--//footer-->
        <hr />
        <!--notice-->
        <%@ include file="/WEB-INF/jsp/web/kor/include/notice.jspf" %>
        <!--//notice-->
    </div>
    <!--/wrap-->
</body>
</html>